<template>
  <div
    id="app"
    :style="{ height: clientHeight + 'px' }"
    :class="$store.state.settings.app_status"
  >
    <router-view />
  </div>
</template>
<script setup name="app">
import 'element-plus/theme-chalk/index.css'
import '@/styles/index.scss'
import '@/styles/skin_black.scss'
import '@/styles/fontSizeMedium.scss'
const { proxy } = getCurrentInstance()
const clientHeight = ref(document.body.clientHeight)

onMounted(() => {
  // window.onresize 事件可用于检测页面是否触发了放大或缩小。
  window.addEventListener('resize', function () {
    isScale()
  })
  // 阻止pc端浏览器缩放js代码
  // 由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况，只能通过js来控制了
  document.addEventListener(
    'DOMContentLoaded',
    function (event) {
      // chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
      document.body.style.zoom = 'reset'
      document.addEventListener(
        'keydown',
        function (event) {
          if (
            (event.ctrlKey === true || event.metaKey === true) &&
            (event.which === 61 ||
              event.which === 107 ||
              event.which === 173 ||
              event.which === 109 ||
              event.which === 187 ||
              event.which === 189)
          ) {
            event.preventDefault()
          }
        },
        false
      )
      var scrollFunc = function (event) {
        event = event || window.event
        if (event.wheelDelta) {
          //判断浏览器IE，谷歌滑轮事件
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }
      }
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false)
      }
      //滚动滑轮触发scrollFunc方法
      window.onmousewheel = document.onmousewheel = scrollFunc
    },
    false
  )

  window.onresize = () => {
    proxy.$store.dispatch(
      'settings/updateScreen',
      document.body.clientWidth > 1000 ? 3 : 1
    )
    proxy.$store.dispatch(
      'settings/updateBodyHeight',
      document.body.clientHeight
    )
    clientHeight.value = document.body.clientHeight
    proxy.$store.dispatch('settings/updateMenuStatus', true)
  }
})
// 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小
const detectZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase()

  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth
  }

  if (ratio) {
    ratio = Math.round(ratio * 100)
  }
  // console.log(window.devicePixelRatio, 123);
  return ratio
}
const isScale = () => {
  let rate = detectZoom(),
    isMac = /macintosh|mac os x/i.test(navigator.userAgent) // Mac默认缩放值为200，windows默认为100，需要分开判断
  if ((isMac && rate !== 200) || (!isMac && rate !== 100)) {
    //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用，又无法自动条用键盘事件，目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
    // alert(
    //   "当前页面不是100%显示，请按键盘ctrl/command + 0恢复100%显示标准，以防页面显示错乱！"
    // );
  }
}
</script>
